<!DOCTYPE html>
<html
  lang="en"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
>
  <head th:fragment="fragments :: html_head "></head>

  <body>
    <div th:fragment="header">
      <form
        th:action="@{/logout}"
        method="post"
        th:hidden="true"
        name="logoutForm"
      >
        <input type="submit" />
      </form>
      <nav class="header-nav navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" th:href="@{/}">
          <img th:src="@{/images/logo.png}" style="height: 50px; width: auto" />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navToggle"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navToggle">
          <ul class="navbar-nav">
            <th:block sec:authorize="hasAuthority('Admin')">
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  data-toggle="dropdown"
                  th:href="@{/users}"
                  >Users</a
                >
                <div class="dropdown-menu">
                  <a class="dropdown-item" th:href="@{/users/new}"
                    ><i class="fa fa-plus-circle"></i> New</a
                  >
                  <a class="dropdown-item" th:href="@{/users}">View All</a>
                </div>
              </li>
            </th:block>

            <th:block sec:authorize="hasAnyAuthority('Admin', 'Editor')">
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  data-toggle="dropdown"
                  th:href="@{/categories}"
                  >Categories</a
                >
                <div class="dropdown-menu">
                  <a class="dropdown-item" th:href="@{/categories/new}"
                    ><i class="fa fa-plus-circle"></i> New</a
                  >
                  >
                  <a class="dropdown-item" th:href="@{/categories}">View All</a>
                </div>
              </li>

              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  data-toggle="dropdown"
                  th:href="@{/brands}"
                  >Brands</a
                >
                <div class="dropdown-menu">
                  <a class="dropdown-item" th:href="@{/brands/new}"
                    ><i class="fa fa-plus-circle"></i> New</a
                  >
                  >
                  <a class="dropdown-item" th:href="@{/brands}">View All</a>
                </div>
              </li>
            </th:block>

            <th:block
              sec:authorize="hasAnyAuthority('Admin','Sales', 'Editor','Shipper')"
            >
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  data-toggle="dropdown"
                  th:href="@{/products}"
                  >Products</a
                >
                <div class="dropdown-menu">
                  <a
                    class="dropdown-item"
                    th:href="@{/products/new}"
                    sec:authorize="hasAnyAuthority('Admin', 'Editor')"
                    ><i class="fa fa-plus-circle"></i> New</a
                  >
                  >
                  <a class="dropdown-item" th:href="@{/products}">View All</a>
                </div>
              </li>
            </th:block>
            <th:block sec:authorize="hasAnyAuthority('Admin','Assistant')">
              <li class="nav-item">
                <a class="nav-link" th:href="@{/service}">Service</a>
              </li>
            </th:block>
            <th:block sec:authorize="hasAnyAuthority('Admin','Assistant')">
              <li class="nav-item">
                <a class="nav-link" th:href="@{/reviews}">Reviews</a>
              </li>
            </th:block>
            <th:block sec:authorize="hasAnyAuthority('Admin', 'Sales')">
              <li class="nav-item">
                <a class="nav-link" th:href="@{/customer}">Customers</a>
              </li>
            </th:block>
            <th:block
              sec:authorize="hasAnyAuthority('Admin', 'Sales','Shipper')"
            >
              <li class="nav-item">
                <a class="nav-link" th:href="@{/orders}">Orders</a>
              </li>
            </th:block>
            <th:block sec:authorize="hasAnyAuthority('Admin', 'Sales')">
              <li class="nav-item">
                <a class="nav-link" th:href="@{/shipping}">Shipping</a>
              </li>
            </th:block>
            <th:block sec:authorize="hasAnyAuthority('Admin', 'Sales')">
              <li class="nav-item">
                <a class="nav-link" th:href="@{/report}">Reports</a>
              </li>
            </th:block>
            <th:block sec:authorize="hasAnyAuthority('Admin', 'Editor')">
              <li class="nav-item">
                <a class="nav-link" th:href="@{/articles}">Articles</a>
              </li>
            </th:block>
            <th:block sec:authorize="hasAnyAuthority('Admin', 'Editor')">
              <li class="nav-item">
                <a class="nav-link" th:href="@{/menus}">Menus</a>
              </li>
            </th:block>
            <li class="nav-item dropdown" sec:authorize="hasAuthority('Admin')">
              <a
                class="nav-link dropdown-toggle"
                data-toggle="dropdown"
                th:href="@{/settings}"
                >Settings</a
              >
              <div class="dropdown-menu">
                <a class="dropdown-item" th:href="@{/settings#general}"
                  >General</a
                >
                <a class="dropdown-item" th:href="@{/settings#countries}"
                  >Countries</a
                >
                <a class="dropdown-item" th:href="@{/settings#states}"
                  >States</a
                >
                <a class="dropdown-item" th:href="@{/settings#mailServer}"
                  >Mail Server</a
                >
                <a class="dropdown-item" th:href="@{/settings#mailTemplates}"
                  >Main Templates</a
                >
                <a class="dropdown-item" th:href="@{/settings#payment}"
                  >Payment</a
                >
              </div>
            </li>
            <li>
              <span class="fas fa-user fa-2x icon-silver"></span>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                data-toggle="dropdown"
                sec:authentication="principal.fullName"
              ></a>
              <div class="dropdown-menu">
                <a class="dropdown-item" th:href="@{/account}"
                  >Account Details</a
                >
                <a class="dropdown-item" id="logoutLink" href="#">Logout</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </body>
</html>
